<script setup>
import { ref } from 'vue'
let a = [
  { id: 1, name: '刘', age: 20 },
  { id: 2, name: '张', age: 20 },
  { id: 3, name: '刘', age: 20 },
  { id: 4, name: '刘', age: 20 },
  { id: 5, name: '刘', age: 20 },
  { id: 6, name: '刘', age: 20 },
  { id: 7, name: '刘', age: 20 },
  { id: 8, name: '刘', age: 20 },
]
let users = ref([
  { id: 1, name: '刘', age: 20 },
  { id: 2, name: '张', age: 20 },
  { id: 3, name: '刘', age: 20 },
  { id: 4, name: '刘', age: 20 },
  { id: 5, name: '刘', age: 20 },
  { id: 6, name: '刘', age: 20 },
  { id: 7, name: '刘', age: 20 },
  { id: 8, name: '刘', age: 20 },
])
let isshow = ref(false)
let user = ref({
  id: '',
  name: ' ',
  age: ' ',
})
let keyword = ref('')
function delt(id) {
  let idx = users.value.findIndex((item) => item.id === id)
  users.value.splice(idx, 1)
}
function edit(id) {
  console.log('编辑', id)
  isshow.value = true
}
function btnAdd() {
  isshow.value = true
}
function btnSave() {

  users.value.push(user.value)
  isshow.value = false
}
function btnCancel() {
  console.log('取消')
  isshow.value = false
}
function btnfilter() {
  console.log('查询')

  users.value = a.filter((item) => item.name.includes(keyword.value))
}
</script>

<template>
  <div class="usersAddorEdit" v-show="isshow">
    <form action="">
      <table>
        <tbody>
          <tr>
            <td><label for="">姓名</label></td>
            <td><input type="text" placeholder="请输入姓名" v-model="user.name" /></td>
          </tr>
          <tr>
            <td><label for="">年龄</label></td>
            <td><input type="text" placeholder="请输入年龄" v-model="user.age" /></td>
          </tr>
          <tr>
            <td><input type="button" value="保存" @click="btnSave" /></td>
            <td><input type="button" value="取消" @click="btnCancel" /></td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>

  <h1>用户信息管理</h1>
  <div>
    <div>
      <input type="text" placeholder="请输入关键词" v-model="keyword" />
      <input type="button" value="查询" @click="btnfilter" />
      <input type="button" value="新增" @click="btnAdd" />
    </div>

    <table>
      <thead>
        <tr>
          <th>id</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>
            <button @click="edit(user.id)">修改</button>
            <button @click="delt(user.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>


<template>
<book1/>
</template>

<script setup>
import book1 from './components/book1.vue';
</script>